<template>
 <div class="content">
   <div class="small-content">
      <div class="picture">
      <img  class="picture_img" src="../../../static/images/test.gif" alt="">
      </div>
      <div class="authorrization ">
      <button class="  bg-olive   round " open-type="getUserInfo" role="button" @getuserinfo="bindgetuserinfo">用户授权</button>
  </div>
   </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {
        nickName: '',
        avatarUrl: ''
      }
    }
  },
  methods: {
    bindgetuserinfo: function (e) {
      console.log(e.mp.detail.rawData)
      if (e.mp.detail.rawData) {
        this.hasUserInfo = true
        this.setting()
        console.log('用户按了允许授权按钮')
      } else {
        console.log('用户按了拒绝按钮')
      }
    },
    setting () {
      const that = this
      wx.login({
        success (res) {
          if (res.code) {
            console.log('res.code+' + res.code)
            var rescode = res.code
            wx.getSetting({
              success (res) {
                if (res.authSetting['scope.userInfo']) {
                  wx.getUserInfo({
                    success: (res) => {
                      that.userInfo = res.userInfo
                      console.log(that.userInfo)
                      wx.request({
                        url: process.env.BASE_API + '/wx/login',
                        method: 'POST',
                        header: {
                          'content-type': 'application/x-www-form-urlencoded'
                        },
                        data: {
                          code: rescode,
                          rawData: res.rawData,
                          signature: res.signature,
                          encrypteData: res.encrypteData,
                          iv: res.iv
                        },
                        success: function (res) {
                          if (res.data.status === 200) {
                            // 7.小程序存储skey（自定义登录状态）到本地
                            wx.setStorageSync('userInfo', res.data.userInfo)
                            wx.setStorageSync('skey', res.data.data)
                          } else {
                            console.log('服务器异常')
                          }
                        },
                        fail: function (error) {
                          console.log(error)
                        }
                      })
                      const url = '../main/main?nickName=' + that.userInfo.nickName + '&avatarUrl=' + that.userInfo.avatarUrl
                      mpvue.navigateTo({url})
                    }
                  })
                  // console.log(that.userInfo)
                }
              }
            })
          }
        }
      })
    }
  },
  mounted () {
    this.setting()
  }
}
</script>

<style scoped>
.content{
    position: absolute; 
    width : 100%;
    height : 100%;
    background-image: url("");
   background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;
}
.small-content{
  position: absolute;
  top: 15%;
  bottom: 15%;
  height: 70%;
  width: 100%;
}
.picture{
  position: relative;
  height: 60%;
  text-align: center;
}
.picture_img{
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: 100%;
}
.authorrization {
  position: relative;
  height: 20%;
  bottom: 0;
  text-align: center;
  font-size: 20rpx;
  margin: 100rpx;
}
.authorrization  button{
  margin: 0 auto;
  width: 50%;
  box-shadow: 5px 5px 4px #ddd; 
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
